<template>
	<div class="login">
		<div class="login-img">
			<img src="../../assets/image/logo.png" />
		</div>
		<div class="login-btns">
			<van-button round class="btn login-btn" @click="toLoginPage">手机号登录</van-button>
			<div class="btn experience-btn" @click="experience">立即体验</div>
		</div>
		<transition name="enter">
			<router-view />
		</transition>
	</div>
</template>

<script>
export default {
	methods: {
		experience() {
			this.$router.push('/discovery')
		},
		toLoginPage() {
			this.$router.replace('loginPage')
		}
	}
}
</script>
<style lang="less" scoped>
@import '~@/style/variable.less';
@import '~@/style/mixins.less';

.login{
	.route-page();
	background-color: @primary-color;
	.login-img{
		position: relative;
    height: 70%;
    text-align: center;
		>img{
			position: absolute;
			top: 20%;
			left: 50%;
			transform: translateX(-50%);
			width: 80px;
			height: 80px;
		}
	}
	.login-btns{
		position: absolute;
		bottom: 0;
		height: 30%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.btn{
			height: 50px;
			width: 70%;
			line-height: 50px;
			text-align: center;
			font-size: @font-size-normal;
		}
		.login-btn{
			color: @primary-color;
			background: white;
		}
		.experience-btn{
			position: relative;
			margin-top: 10px;
			box-sizing: border-box;
			color: white;
		}
		.experience-btn::before{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			content: " ";
			border: 0.5px solid white;
			border-radius: 50px;
		}
	}
}

</style>